<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信年度聊天报告</title>
    <link rel="stylesheet" href="https://memotrace.cn/static/css/style.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="https://memotrace.cn/static/css/fullpage.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="https://memotrace.cn/static/js/fullpage.min.js"></script>
    <script type="text/javascript" src="https://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>
</head>
<body>
    <div id="snow"></div>
    <!-- Your content goes here -->
<div id="fullpage">
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c0514c518.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04946138.png" alt="Right Top Image" class="corner-image right-bottom">

        <div class="center-container">
            <div>
                <img src="https://www.freeimg.cn/i/2023/12/20/6582c05a78e58.png">
            </div>
            <div class="user-container">
                <div class="user">
                    <img class="avatar" src="{{my_avatar_path}}">
                  <span class="nickname">{{my_nickname}}</span>
                </div>

                <img src="https://memotrace.cn/static/img/铃铛.png" alt="Right Top Image" class="spliter-img">
                <div class="user">
                    <img class="avatar" src="{{ta_avatar_path}}">
                  <span class="nickname">{{ta_nickname}}</span>
                </div>
            </div>
            <div>
                <p class="mt-3">我们第一次聊天在</p>
                <p id="first_time" class="first-time">{{first_time}}</p>
                <p class="mt-3">距今已有</p>
                <div class="mt-3">
                    <span id="t_d"></span>
                    <span id="t_h"></span>
                    <span id="t_m"></span>
                    <span id="t_s"></span>
                </div>
            </div>
            <!-- <div>
                <img src="img/雪人.gif">
            </div>
            <div>
                <img src="img/雪人1.gif">
            </div> -->
        </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c07223f22.png" alt="礼袋" class="corner-image left-bottom-gift">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c055cc6df.png" alt="圣诞老人" class="corner-image right-bottom-oldman">
        </div>
        <div class="wordcloud">
            <div id="word_cloud" class="chart-container"></div>
        </div>
        <div class="keyword-container">
            <div class="tp1">二〇二三</div>
            <div class="tp1">你们说的最多的是</div>
            <div class="keyword">“{{keyword}}”<span class="keyword-num">{{keyword_max_num}}</span><span class="tp1">次</span></div>
            <!-- <img src="static/img/窗雪.png"> -->
        </div>
        <div class="dialog-container">
            {% for dialog in dialogs %}
               <div class="item item-center">{{dialog[0][3]}}</div>
                {% if dialog[0][0]==0: %}
                     <div class="item item-left">
                        <img class="bubble-avatar" src="{{ta_avatar_path}}">
                        <div class="bubble bubble-left">
                            {% for p in dialog[0][2][:-1] %}
                                {{p}}<span style="color:red">{{keyword}}</span>
                            {% endfor %}
                            {{dialog[0][2][-1]}}
                        </div>
                    </div>
                    <div class="item item-right">
                        <div class="bubble bubble-right">
                            {{dialog[1][2]}}
                        </div>
                        <img class="bubble-avatar" src="{{my_avatar_path}}">
                    </div>
                {% endif %}
                {% if dialog[0][0]==1: %}
                     <div class="item item-right">
                        <div class="bubble bubble-right">
                            {% for p in dialog[0][2][:-1] %}
                                {{p}}<span style="color:red">{{keyword}}</span>
                            {% endfor %}
                            {{dialog[0][2][-1]}}
                        </div>
                         <img class="bubble-avatar" src="{{my_avatar_path}}">
                    </div>
                    <div class="item item-left">
                        <img class="bubble-avatar" src="{{ta_avatar_path}}">
                        <div class="bubble bubble-left">
                            {{dialog[1][2]}}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04589c47.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/21/65831360a36d4.gif" alt="Right Top Image" class="corner-image right-bottom" style="max-height: 500px;">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c054816cf.png" alt="圣诞老人" class="center-top-time">
            <img src="https://memotrace.cn/static/img/平安夜.png" alt="Right Top Image" class="left-time">
            <div class="time-container">
                <div class="text112">{{latest_time}}</div>
                <div class="text112">这么晚了你们还在聊天</div>
                <div class="text112">那天一定有你们<span style="color: brown;">难忘的回忆</span>吧</div>
                <div><br></div>
                <div class="text112">你们都是<span style="color: brown;">{{chat_time_label}}</span></div>
                <div class="text113">{{chat_time}}</div>
                <div class="text112">你们一共发送了<span style="color: brown;">{{chat_time_num}}</span>条消息</div>
            </div>
            <div class="parent">
                <div class="dialog-container-time">
                    <div class="item item-center">{{latest_time}}</div>
                    {% for dialog in latest_time_dialog %}
                        {% if dialog[0]==0: %}
                             <div class="item item-left">
                                <img class="bubble-avatar" src="{{ta_avatar_path}}">
                                <div class="bubble bubble-left">
                                    {{dialog[1]}}
                                </div>
                            </div>
                        {% endif %}
                        {% if dialog[0]==1: %}
                             <div class="item item-right">
                                <div class="bubble bubble-right">
                                    {{dialog[1]}}
                                </div>
                                 <img class="bubble-avatar" src="{{my_avatar_path}}">
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c03ce4548.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c05a9a4bd.png" alt="滑雪的小女孩" class="corner-image right-bottom">
            <img src="https://www.freeimg.cn/i/2023/12/20/6582c04d5151f.png" alt="Right Top Image" class="snow-ball">
            <img src="https://memotrace.cn/static/img/礼盒1.png" alt="Right Top Image" class="ttq">
            <div class="time-container">
                <div class="text112">过去的一年里</div>
                <div class="text112">你们一共发送了<span style="color: brown;">{{total_msg_num}}</span>条消息</div>
                <div class="text112">总计<span style="color: brown;">{{total_num}}</span>字</div>
                <div><br></div>
                <div class="text112">你们的聊天似乎没有规律</div>
                <div class="text112">
                    <span style="color: brown;">{{max_month}}</span>
                    一共发送了
                    <span style="color: brown;">{{max_month_num}}</span>
                    条消息
                </div>
                <div class="text112">对你的话说不完</div>
                <div><br></div>
                <div class="text112">
                    <span style="color: brown;">{{min_month}}</span>
                    只有
                    <span style="color: brown;">{{min_month_num}}</span>
                    条消息
                </div>
                <div class="text112">有时候你们也想静静</div>
            </div>
        </div>
    </div>
    <div class="section">
            <div>
                <img class="Mountain-Image" src="https://www.freeimg.cn/i/2023/12/20/6582c04711cd2.png" alt="Mountain Image">
                <img class="corner-light light-top-left txt" src="https://www.freeimg.cn/i/2023/12/20/6582c05d9dcbb.png" alt="Top Left Light">
                <img class="corner-light light-top-right txt" src="https://www.freeimg.cn/i/2023/12/20/6582c07b257db.png" alt="Bottom Right Light">
                <img src="https://www.freeimg.cn/i/2023/12/20/6582c064276db.png" alt="包饺子" class="corner-image left-bottom">
                <img src="https://www.freeimg.cn/i/2023/12/21/658313714609b.png" alt="Right Top Image" class="corner-image right-bottom">
                <div class="calendar-container">
                    <div class="text012">{{year}}年</div>
                    <div class="text012">
                        我们有
                        <span style="color: brown;">{{chat_days}}</span>
                        天在聊天
                    </div>
                    <div class="text012">有你在的日子里</div>
                    <div class="text012">
                        都很有
                        <span style="color: brown;">意义</span>！
                    </div>
                    <div><br></div>
                    <div class="text012">这一年</div>
                    <div class="text012">
                        一共发送了
                        <span style="color: brown;">{{emoji_total_num}}</span>
                        个表情包
                    </div>
                    <div class="text012">Ta最常用的表情包是</div>
                    <img src="{{emoji_url}}" class="emoji">
                    <div class="text012">
                        一共
                        <span style="color: brown;">{{emoji_num}}</span>次
                    </div>
                </div>
                <div id="calendar-chart" class="calendar-chart"></div>
            </div>
    </div>
    <div class="section" style="text-align: center;display:flex;justify-content: center;align-items: center;"> 
        <h1>分享此页面</h1>
        <div>
            <a id="share" href="https://memotrace.cn/" target="_blank">https://memotrace.cn/</a>
        </div>
        <button onclick="confirmUpload()">上传并显示二维码</button>
        <div id="qrcode"></div>
        <a href="https://memotrace.cn/" target="_blank">点击生成我的年度聊天报告</a>
        <div style="height:400px"></div>
        <div>
            <img src="https://memotrace.cn/img/logo3.0.png" alt="Logo">
            <p class="text-larger mb-2">Copyrights © 2022-2024 <a href="https://memotrace.cn/">SiYuan</a> 版权所有. Inc.</p>
            <!-- <span class="op-07">请遵守所在国家的相关法律法规</span> -->
        </div>
    </div>
    <!-- Add more sections as needed -->
</div>
  <script>
        function confirmUpload() {
            var userConfirmed = confirm("注意！！！\n本页面将会上传至云端，别人可通过链接查看该网页，该操作不会上传您的其他任何信息，页面将在下个版本更新之后删除，请注意链接生效时间。\n点击“确认”代表您同意上传，否则请点击“取消");

            if (userConfirmed) {
                // User clicked OK, perform the upload and display QR code
                uploadAndDisplayQRCode();
            } else {
                // User clicked Cancel or closed the dialog
                alert("Upload canceled.");
            }
        }

        function uploadAndDisplayQRCode() {
            // Simulate a GET request to the server endpoint
            fetch('http://127.0.0.1:21314/upload')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayQRCode(data.url);
                    } else {
                        if(data.code==201){
                            displayQRCode(data.url);
                            alert(data.errmsg);
                        }
                        else{
                            alert(data.errmsg);
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error: Unable to fetch data from the server.\n'+error);
                });
        }

        function displayQRCode(url) {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: url,
                width: 128,
                height: 128
            });
            var aObj = document.getElementById("share");
            aObj.href = url;
            //根据id获取超链接,设置文字内容
            aObj.innerText = url;
        }
    </script>
<script>
    // JavaScript 代码用于生成聊天内容和雪花动画
    document.addEventListener('DOMContentLoaded', function () {
        const snowContainer = document.getElementById('snow');
        // 生成雪花动画
        for (let i = 0; i < 50; i++) {
            const snowflake = document.createElement('div');
            snowflake.className = 'snowflake';
            var ran = Math.random();
            var ran0 = 1-ran;
            snowflake.style.left = `${Math.random() * 150}vw`;
            snowflake.style.animationDuration = `${ran0  * 20 + 7}s`;
            snowflake.style.setProperty('--animation-order', i);

            // 设置雪花的随机大小
            const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            snowContainer.appendChild(snowflake);
        }
    });
    function createSnowflake(top, left) {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake0';
      snowflake.style.top = `${top}vh`;
      snowflake.style.left = `${left}vw`;
      // 设置雪花的随机大小
      const size = Math.random() * 20 + 10; // 随机大小在 10 到 30 之间
        snowflake.style.width = `${size}px`;
        snowflake.style.height = `${size}px`;
      document.body.appendChild(snowflake);
    }
</script>
<script>
    var chart = echarts.init(document.getElementById('word_cloud'), 'white', {renderer: 'canvas'});
    var result = {{wordcloud_chart_data|safe}};
    // 获取屏幕宽度
    const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 根据屏幕宽度设置字体范围
    let fontSizeRange;
    if (screenWidth < 768) { // 手机屏幕
        fontSizeRange = [5, 40];
    } else { // 电脑屏幕
        fontSizeRange = [10, 100];
    }
    result.series[0].sizeRange = fontSizeRange;
    chart.setOption(result);
</script>
<script>
    $(document).ready(function() {
      $('#fullpage').fullpage();
    });
  </script>
  <script type="text/javascript"> function getRTime() {
    var tt = document.getElementById("first_time").innerText;
    var EndTime = new Date(tt);
    var NowTime = new Date();
    var t = NowTime.getTime()-EndTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
    document.getElementById("t_d").innerHTML = d + " 天";
    document.getElementById("t_h").innerHTML = h + " 时";
    document.getElementById("t_m").innerHTML = m + " 分";
    document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);

</script>
<script>
    var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
        document.getElementById('calendar-chart'), 'white', {renderer: 'canvas'});
    var result = {{calendar_chart_data|safe}};
    // 根据屏幕宽度设置字体范围
    let cellSize;
    if (screenWidth < 768) { // 手机屏幕
        result.calendar.cellSize = 10;
    } else { // 电脑屏幕
        result.calendar.cellSize = 15;
    }
    chart_51ebd4312946429e9c32b2b55b96a479.setOption(result);
</script>
</body>
</html>
